<template>
    <div v-if="show" class="popup-box">
        <div class="popup-box-bg"></div>
        <div class="popup-box-wrap">
            <div class="popup-box-head">{{ title }}<a href="javascript:" class="iconfont icon-guanbi" @click="show = false"></a></div>
            <slot name="head"></slot>
            <div class="popup-box-content">
                <slot name="content"></slot>
            </div>
            <div class="popup-box-foot c-clearfix">
                <slot name="left-foot"></slot>
                <div class="c-fr">
                    <button type="button" class="c-btn sm transprant" @click="show = false">取消</button>
                    <button type="button" class="c-btn sm" @click="submit">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'popupBox',
        data(){
            return {
                show: false,
            }
        },
        props: {
            title: { type: String, required: true },
        },
        methods: {
            submit(){
                this.$emit('submit');
            },
        },
    }
</script>

<style lang="scss">
    .popup-box{
        position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 19;
        .popup-box-bg{position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: -1;background: rgba(0,0,0,0.5);}
        .popup-box-head{border-bottom: 1px solid #d8e3eb;line-height: 56px;padding: 0 12px 0 20px;font-size: 18px;}
        .popup-box-wrap{position: absolute;left: 50%;top: 45%;width: 750px;margin-left: -375px;margin-top: -293px;background: #fff;border-radius: 4px;box-sizing: border-box;}
        .popup-box-head a{float: right;font-size: 24px;line-height: 32px;width: 32px;text-align: center;margin-top: 12px;color: #666;}
        .popup-box-content{padding: 20px;height: 432px;overflow-y: auto;}
        .popup-box-foot{padding: 12px 20px;border-top: 1px solid #d8e3eb;}
        .popup-box-foot .c-btn{margin-right: 12px;}
        .popup-box-foot .c-btn:last-child{margin-right: 0;}
        .pagination{float: left;}
    }
</style>
